PROTOTYPE: scroll-reactive bottom bar (Instagram-style) (#86)#90
Open
ryanbr wants to merge 4 commits into
Open
PROTOTYPE: scroll-reactive bottom bar (Instagram-style) (#86)#90ryanbr wants to merge 4 commits into
ryanbr wants to merge 4 commits into
Conversation
… on up (#86) Instagram-style: the floating GlassBottomBar subtly recedes (shrink + fade + slide toward the edge) as you scroll DOWN into content and returns when you scroll UP, so the app feels more dynamic without hiding the tabs. - One NestedScrollConnection on the NavHost drives it, so every screen gets the behaviour with zero per-screen wiring. onPreScroll only flips a Boolean on a direction change; a 220ms tween animates a single `collapse` float. - The bar applies `collapse` as a graphicsLayer transform ONLY (scale ~0.88, alpha to 0.6, translateY 22dp, bottom-centre pivot). No relayout — the Scaffold keeps the bar's reserved space — so scrolling stays smooth (GPU transform per frame). - Reduce Motion keeps the bar fully shown (no animation). Subtle by design; the transform constants are the tuning knobs. Android only for now. Android compiles locally.
…e off (#86) Feedback: the collapsed bar slid too far down (into the gesture-nav area) and didn't read as transparent. Retuned: fade toward see-through (alpha to ~0.35), gentler shrink (0.92), and only a hair of drift (22dp -> 6dp) so it recedes IN PLACE rather than falling off the bottom. Android compiles.
…tabs (#86) Feedback (correctly, twice): the pill's dark translucent fill read as a solid "bar" behind the tabs and blocked the content. Drop the fill entirely — the pill is now just the hairline capsule outline + tab icons floating over the content, which shows straight through. Also removed the drop shadow (also read as a slab). Android compiles.
…" band (#86) The full-width band behind the pill was the Scaffold's RESERVED bottomBar region (filled with the flat app background), sitting below the tinted content. Moved the bar out of the bottomBar slot and overlay it (Box + align bottom-centre) on full-bleed content, so the content's background fills continuously behind the now-transparent pill — no band. NestedScroll moves to the full-bleed NavHost. Note: content now scrolls UNDER the floating transparent pill (iOS-style); screens keep their 28dp bottom padding, so the last item can sit partly behind the bar at the very bottom of a scroll — a bottom-padding bump is the follow-up if that bites. Android compiles.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Prototype for #86 (Quaii) — a subtle, scroll-reactive bottom bar like Instagram's.
Behaviour
The floating
GlassBottomBarrecedes (a subtle shrink + fade + slide toward the bottom edge) as you scroll down into content, and returns when you scroll up — so the app feels more dynamic without hiding the tabs. Kept partial by design (scale ~0.88, alpha to 0.6, translateY 22dp) so the tabs stay reachable — "subtle but noticeable," per the request.How it's wired (built for smooth scroll)
NestedScrollConnectionon theNavHostdrives it — every screen gets the behaviour with no per-screen wiring (scrollable children dispatch their deltas up to it).onPreScrollonly flips a Boolean on a direction change; a 220ms tween animates a singlecollapsefloat.collapseas agraphicsLayertransform only (GPU, per-frame) — no relayout, because theScaffoldkeeps the bar's reserved space. So the content doesn't reflow and scrolling stays smooth.Scope / testing
Surface, easy + low-risk). If the feel lands, I'll port to the iOS floating two-island bar + FAB.compileFullDebugKotlin, exit 0).translationY/alpha — tell me which feel matches the video.File:
android/app/src/main/java/com/noop/ui/AppRoot.kt.